<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>hello</title>
    <link href="lib/css/bootstrap/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" href="lib/css/basic.css" type="text/css">
    <link type="text/css" rel="stylesheet"
          href="lib/css/SyntaxHighlighter/shCore.css"/>
    <link type="text/css" rel="Stylesheet"
          href="lib/css/SyntaxHighlighter/shThemeDefault.css"/>
</head>
<body>
<div class="wrapper"><h1><br></h1></div>
<div class="wrapper"><h1>Hello, world!</h1>
</div>
<div id="mainContent" class="tool_content wrapper">
    <div class="clearfix toolUsing"></div>
    <div class="topBar">
        <label for="code_source">输入代码：</label><textarea id="code_source">/* ---示例代码----*/

function echo (){

	var a="this is a example";

	alert("hello world "+a);

}

/* ---示例代码----*/
	</textarea>
    </div>
    <form class="form-inline">
        <select id="code_type" class="span2">
            <option value="js">Javascript</option>
            <option value="xml">HTML/XML</option>
            <option value="java">Java</option>
            <option value="c">C/C++/Objectiv-C</option>
            <option value="ruby">Ruby</option>
            <option value="csharp">C#</option>
            <option value="css">CSS</option>
            <option value="delphi">Delphi</option>
            <option value="erlang">Erlang</option>
            <option value="groovy">Groovy</option>
            <option value="javafx">JavaFX</option>
            <option value="perl">Perl</option>
            <option value="php">PHP</option>
            <option value="powershell">PowerShell</option>
            <option value="python">Python</option>
            <option value="scala">Scala</option>
            <option value="sql">SQL</option>
            <option value="vb">VB</option>
            <option value="as3">AS3</option>
            <option value="bash">Bash</option>
            <option value="coldfusion">ColdFusion</option>
            <option value="diff">Diff</option>
            <option value="plain">Plain</option>
            <option value="sass">Sass</option>
            <option value="applescript">AppleScript</option>
        </select>
        <label class="checkbox"><input type="checkbox" id="gutter"
                                       checked="checked">显示行号</label>
        <label class="checkbox"><input type="checkbox"
                                       id="to_html">生成HTML</label>
        <button type="button" class="btn btn-primary" id="render"><i
                class="icon-chevron-down icon-white"></i>语法着色
        </button>
        <p>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="default"
                                        checked="checked">默认样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="emacs">Emacs样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="eclipse">Eclipse样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="django">Django样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="fadetogrey">FadeToGrey样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="mdultra">MDUltra样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="midnight">Midnight样式</label>
            <label class="radio"><input type="radio" name="higilight_style"
                                        value="rdark">RDark样式</label>
        </p></form>
    <div><br></div>
    <div class="bottomBar clearfix">
        <div id="html_div" style="display: none;">
            <<textarea id="html"></textarea>
        </div>
        <div id="result_div">
            <pre class="brush: sql;">
function helloSyntaxHighlighter()
{
    return "hi!";
}
</pre>
        </div>

    </div>
</div>

<link id="css" rel="stylesheet" type="text/css"
      href="lib/css/SyntaxHighlighter/shCoreDefault.css">
<script src="lib/jquery/jquery.js"></script>
<script src="lib/jquery.cookie/jquery.cookie.js"></script>
<script src="lib/js/bootstrap/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript"
        src="lib/js/SyntaxHighlighter/XRegExp.js"></script>
<!-- XRegExp is bundled with the final shCore.js during build -->
<script type="text/javascript"
        src="lib/js/SyntaxHighlighter/shCore.js"></script>
<!--<script type="text/javascript"-->
<!--src="lib/js/SyntaxHighlighter/shBrushJScript.js"></script>-->
<!--<script type="text/javascript"-->
<!--src="lib/js/SyntaxHighlighter/shBrushBash.js"></script>-->
<!--<script type="text/javascript"-->
<!--src="lib/js/SyntaxHighlighter/shAutoloader.js"></script>-->

<script>
    var SCRIPT_MAP = {
        'applescript': 'shBrushAppleScript.js',
        'as3': 'shBrushAS3.js',
        'bash': 'shBrushBash.js',
        'coldfusion': 'shBrushColdFusion.js',
        'c': 'shBrushCpp.js',
        'csharp': 'shBrushCSharp.js',
        'css': 'shBrushCss.js',
        'delphi': 'shBrushDelphi.js',
        'diff': 'shBrushDiff.js',
        'erl': 'shBrushErlang.js',
        'groovy': 'shBrushGroovy.js',
        'java': 'shBrushJava.js',
        'javafx': 'shBrushJavaFX.js',
        'js': 'shBrushJScript.js',
        'perl': 'shBrushPerl.js',
        'php': 'shBrushPhp.js',
        'plain': 'shBrushPlain.js',
        'powershell': 'shBrushPowerShell.js',
        'python': 'shBrushPython.js',
        'ruby': 'shBrushRuby.js',
        'sass': 'shBrushSass.js',
        'scala': 'shBrushScala.js',
        'sql': 'shBrushSql.js',
        'vb': 'shBrushVb.js',
        'xml': 'shBrushXml.js'
    };
    for (var key in SCRIPT_MAP){
        var url = "lib/js/SyntaxHighlighter/" + SCRIPT_MAP[key];
        var script = document.createElement('script');
		script.src = url;
		script.type = 'text/javascript';
		script.language = 'javascript';
        document.body.appendChild(script);
    }

    var REGX_HTML_ENCODE = /"|&|'|<|>|[\x00-\x20]|[\x7F-\xFF]|[\u0100-\u2700]/g;
    function encodeHtml(s) {
        return (typeof s != "string") ? s :
                s.replace(REGX_HTML_ENCODE,
                        function ($0) {
                            var c = $0.charCodeAt(0), r = ["&#"];
                            c = (c == 0x20) ? 0xA0 : c;
                            r.push(c);
                            r.push(";");
                            return r.join("");
                        });
    };

        function render() {
            var $result_div = $("#result_div");
            var code_type = $("#code_type").val();
            var code_value = encodeHtml($("#code_source").val());
            var url_base = "lib/js/SyntaxHighlighter/";
            var url = url_base + SCRIPT_MAP[code_type];
            $result_div.empty();
            $result_div.prepend("<pre>" + code_value + "</pre>");
            var class_v = "brush: " + code_type + ";";
            if (!$("#gutter").prop("checked"))
                class_v = class_v + "gutter: false;";
            $result_div.find("pre").addClass(class_v);
            SyntaxHighlighter.highlight();
            toHTML();
            $.cookie("style_type", $("label.radio>input:checked").val(), {expires: 7});
            $.cookie("lang_type", code_type, {expires: 7});

        }

        function toHTML() {
            var $html_div = $("#html_div");
            var html = "<link rel='stylesheet' type='text/css'";
            html = html + $("#css").attr("href");
            html = html + "'/>";
            html = html + $(".syntaxhighlighter").parent().html();
            $html_div.find("textarea").val(html);
            if ($("#to_html").prop("checked")) {
//            console.log("show");
                $html_div.show();
            }
            else {
//            console.log("hide");
                $html_div.hide();
            }
        }

        function change(type) {    //更改样式
            var css = document.getElementById("css");
            if ("default" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreDefault.css");
            if ("emacs" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreEmacs.css");
            if ("django" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreDjango.css");
            if ("eclipse" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreEclipse.css");
            if ("fadetogrey" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreFadeToGrey.css");
            if ("mdultra" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreMDUltra.css");
            if ("midnight" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreMidnight.css");
            if ("rdark" == type)
                css.setAttribute("href", "lib/css/SyntaxHighlighter/shCoreRDark.css");
            render();
        }



        $(function () {

            $("#render").click(function () {
                render();
            });
            $("#html").click(function () {
                this.focus();
                this.select();
            });
        });
        $(":radio").click(function () {
            change($(this).val());
        });

</script>
</body>
</html>